<template>
  <div>
    <!-- 导航区 -->
    <ul>
      <li v-for="item in messageList" :key="item.id">
        <!-- 纯拼串的写法（很傻的一个写法） -->
        <!-- <router-link :to="`/home/message/detail?id=${item.id}&title=${item.title}&content=${item.content}`"> -->

        <router-link 
          :to="{
            // path:'/home/message/detail', //去哪个路由
            name:'xiangqing',
            query:{ //带什么参数
              id:item.id,
              title:item.title,
              content:item.content
            }
          }"
        >
          {{item.title}}
        </router-link>
      </li>
    </ul>
    <!-- 展示区 -->
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name:'Message',
    data() {
      return {
        messageList:[
          {id:'r65asrd6501',title:"如何一夜暴富",content:'学IT技术'},
          {id:'r65asrd6502',title:"来自缅北消息",content:'来玩啊！'},
          {id:'r65asrd6503',title:"别墅大降价!",content:'快买呀！'},
          {id:'r65asrd6504',title:"来自老板的消息",content:'恭喜你升职了'}
        ]
      }
    },
  }
</script>

<style scoped>
  li {
    background-image: linear-gradient(45deg,skyblue,white);
    border-radius: 5px;
    width: 200px;
    /* border: 1px solid black; */
    box-shadow: 0 0 5px;
    margin-top: 2px;
  }
</style>
